<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频展示效果实例</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
	$(function(){
		var page=1;
		var i=4;//每版放四个图片
		//向后按钮,绑定click事件
		$("span.next").click(function(){
				var $parent=$(this).parents("div.v_show");//根据当前点击的元素获得指定最外层父元素
				var $v_show=$parent.find("div.v_content_list");//寻找到"视频内容展示区域"
				var $v_content=$parent.find("div.v_content");//寻找到"视频内容展示区域"外围的div元素
				var v_width=$v_content.width();//获得内容展示区域的宽度
				var len=$v_show.find("li").length;//获得展示区别li的数量 //下一行只要不是整数，就往大的方向取最小的整数
				var page_count=Math.ceil(len/i);
				if(!$v_show.is(":animated")){//判断“视频内容展示区域是否正在处于动画”
					 if(page==page_count){//已经到最后一个版面了，如果再向后，必须跳到第一个版面
						 $v_show.animate({left:"0px"},"slow");//改变left值,跳到第一个版面
						 page=1;
						 
						 }else{
							 $v_show.animate({left:"-="+v_width},"slow");//通过改变left值，达到每次换一个版面：相当于左移一个版面
							 page++;//下一页
							 }
					}
				//以上完成下一页之后，左上角的箭头旁边的蓝色贺点跟随动画一起切换，来标识当前所处的版面,只需要把样式current添加到代表当前版本的
				//蓝色圆点上就可以了,page是版面数，由于eq方法的下标从0开始，因此要减一就得到当前的版面数
				$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
			});
			//往前按钮
			$("span.prev").click(function(){
					var $parent=$(this).parents("div.v_show");//根据当前点击的元素获得指定最外层父元素
					var $v_show=$parent.find("div.v_content_list");//寻找到"视频内容展示区域"
					var $v_content=$parent.find("div.v_content");//寻找到"视频内容展示区域"外围的div元素
					var v_width=$v_content.width();//获得内容展示区域的宽度
					var len=$v_show.find("li").length;//获得展示区别li的数量 //下一行只要不是整数，就往大的方向取最小的整数
					var page_count=Math.ceil(len/i);
					if(!$v_show.is(":animated")){
						if(page==1){//民经到第一个版面了，如果再向前，必须跳转到最后一个版面
						$v_show.animate({left:"-="+v_width*(page_count-1)},"slow");
						page=page_count;
							
							}else{
								$v_show.animate({left:"+="+v_width},"slow");
								page--;
								}
						}
						$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

				});
			
		});
</script>
</head>

<body>
	<div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em><a href="#">更多>></a></em>
	</div>
	<div class="v_content">
		<div  class="v_content_list">
			<ul>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
		     </ul>
		</div>
	</div>
</div>

</body>
</html>
